<template>
<h2>显示房号</h2>
<input type="button" value="批量上架" @click="Up">
<input type="button" value="批量下架" @click="Drown">
<table border="1">
    <thead> 
    <tr>
        <td><input type="checkbox" v-model="quan" @change="quanAll"></td>
        <td>房号编号</td>
        <td>房号名称</td>
        <td>房型名称</td>
        <td>房号状态</td>
        <td>操作</td>
    </tr>
</thead>
<tbody>
    <tr v-for="item in info">
        <td><input type="checkbox" v-model="newArry" :checked="fan" :value="item.RoomNumberId" @change="fanAll"></td>
        <td>{{item.RoomNumberId}}</td>
        <td>{{item.RoomNumberName}}</td>
        <td>{{item.RoomTypeName}}</td>
        <td>{{item.NumberState==true?"上架":"下架"}}</td>
        <td>操作
            <a style="margin-right: 20px;" @click="Upd(item.RoomNumberId)">修改</a>
        </td>
    </tr>
</tbody>
</table>
</template>
<script setup lang="ts">
import axios from "axios";
import { onMounted ,ref} from "vue";
import { useRouter } from "vue-router";

const router=useRouter();


const Upd=(Nid:number)=>{
    router.push({
        name:"UpdateNumber",
        params:{
            id:Nid
        }
    })
}


 const Drown=()=>{
    if(confirm("你确定要下架吗？")){
        axios.get('https://localhost:7141/api/RoomNumber/UpdateState',
        
         {
             params:{
                 ids:newArry.value.toString()
             }
         }
        
         )
         .then(res=>{
            if(res.data>0){
                alert("下架成功");
                LoData();
             }
             else{
                alert("下架失败");
           }
        })
    }
 }


const Up=()=>{
    if(confirm("你确定要上架吗？")){
        axios.get('https://localhost:7141/api/RoomNumber/UpdateState',
        
        {
            params:{
                ids:newArry.value.toString()
            }
        }
        
        )
        .then(res=>{
            
            if(res.data>0){
                alert("上架成功");
                LoData();
            }
            else{
                alert("上架失败");
            }
        })
    }
}


const quan=ref(false);
const fan=ref(false);
const newArry=ref([]);
//全选
const quanAll=()=>{
    if(quan.value==true){
        
        fan.value==true
        newArry.value=info.value.map((item:any)=>{

            return item.RoomNumberId

        })
        

    }
    else{
        fan.value=false
        newArry.value=[];
      
    }
}

//反选
const fanAll=()=>{

    if(newArry.value.length==info.value.length){
        quan.value=true
    }
    else{
        quan.value=false
    }

}


const info:any=ref([{

    RoomNumberId:0,
    RoomNumberName:"",
    RoomTypeName:"",
    NumberState:true
}])


onMounted(()=>{
    LoData();
})

const LoData=()=>{
    axios.get('https://localhost:7141/api/RoomNumber/ShowRoomNumber')
    .then(res=>{
        info.value=res.data
    })
}




</script>